<template>
	<view class="bind_user">
		<view class="title">
			<text>绑定上级</text>
			<view class="close" @click="close">
				<image src="@/static/images/close.png"></image>
			</view>
		</view>
		<view class="content">
			<view class="item">
				<view class="key">上级ID：</view>
				<input type="text" placeholder="请填写上级ID" v-model="parent_id" class="value" />
			</view>
		</view>
		<view class="submit">
			<view @click="submit">提交</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userBind
	} from "@/request/api";
	import {
		ref
	} from "vue";
	const emit = defineEmits(["close"]);
	let parent_id = ref("");

	const submit = async () => {
		await userBind({
			parent_id: parent_id.value
		});
		uni.$uv.toast("操作成功");
		setTimeout(() => emit('close'), 1500);
	};
	const close = () => emit('close');
</script>

<style scoped lang="scss">
	.bind_user {
		width: 690rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		overflow: hidden;

		.title {
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			color: #222222;
			font-size: 36rpx;
			font-weight: bold;
			box-sizing: border-box;
			position: relative;

			.close {
				position: absolute;
				right: 25rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.content {
			padding: 60rpx 0;
			box-sizing: border-box;

			.item {
				height: 110rpx;
				border-bottom: 1px solid #EEEEEE;
				padding-right: 14rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.key {
					color: #222222;
					font-size: 28rpx;
				}

				.value {
					flex: 1;
					font-size: 28rpx;
				}
			}
		}

		.submit {
			padding: 0 10rpx;
			box-sizing: border-box;

			view {
				width: 100%;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				border-radius: 20rpx;
				background: #CA1C1D;
			}
		}
	}
</style>